import { Button, Modal, TextField } from "@shopify/polaris";
import { useState, useCallback } from "react";

interface Props {
  SPSHOW: boolean;
  setSPSHOW: (value: boolean) => void;
}

function ModalExample({ SPSHOW, setSPSHOW }: Props) {
  

  const handleChange = useCallback(() => setSPSHOW(!SPSHOW), [SPSHOW]);

  const [value, setValue] = useState("");

  const handleChangevalue = useCallback(
    (newValue: string) => setValue(newValue),
    []
  );

  return (
    <div style={{ height: "500px" }}>
      <Modal
        // activator={activator}
        open={SPSHOW}
        onClose={handleChange}
        title="插入视频"
        primaryAction={{
          content: "插入视频",
          onAction: handleChange,
        }}
        secondaryActions={[
          {
            content: "取消",
            onAction: handleChange,
          },
        ]}
      >
        <Modal.Section>
          <TextField
            label="通过将嵌入代码片段粘贴到下面的框中来插入视频。"
            value={value}
            onChange={handleChangevalue}
            multiline={5}
            autoComplete="off"
          />
          <div>{`嵌入代码片段通常以“<iframe ...”开头`}</div>
        </Modal.Section>
      </Modal>
    </div>
  );
}

export default ModalExample;
